import { Box, Text, VerticalStack } from '@shopify/polaris'
import ReportSummaryInfoCard from './ReportSummaryInfoCard'
import ChartypeComponent from '../TestRunsPage/ChartypeComponent'
import ReportTestConfiguration from './ReportTestConfiguration'
import ReportTestingTargets from './ReportTestingTargets'
import StackedChart from '@/apps/dashboard/components/charts/StackedChart'

const ReportSummary = ({ reportSummaryItems, severityMap, topCategoriesChartData, organizationName, currentDate, reportTestConfigurationData, hostNameVsSeverityMap, summaryMode }) => {

    const showTestingConfig = window.location.pathname.includes('testing') && reportTestConfigurationData && Object.keys(reportTestConfigurationData).length > 0
    const showTestingTargets = hostNameVsSeverityMap && Object.keys(hostNameVsSeverityMap).length > 0
    const summarySectionSerial = summaryMode === false ? "1. " : ""

    return (
        <Box id="report-summary" paddingBlockStart={6} paddingBlockEnd={6} paddingInlineStart={5} paddingInlineEnd={5}>
            <VerticalStack gap="4">
                <Text variant="headingLg">{summarySectionSerial}Report summary</Text>
                <VerticalStack gap="3">
                    <Text variant="bodyMd" color='subdued'>
                        The initial security assessment conducted on {currentDate} focused on evaluating core functionalities of <span id='organization-name'>{organizationName}</span>'s API endpoints. The scan was configured to analyze authentication mechanisms, data validation controls, access management, and potential security misconfigurations to identify vulnerabilities that could impact the application's security posture.
                    </Text>
                    <ReportSummaryInfoCard summaryItems={reportSummaryItems} />

                    <Box width='100%' paddingBlockStart={4} paddingBlockEnd={2}>
                        <VerticalStack gap={3}>
                            <Text variant="headingSm">Issues by Severity</Text>

                            <ChartypeComponent
                                data={severityMap}
                                navUrl={""} title={""} isNormal={true} boxHeight={'300px'} chartOnLeft={true} dataTableWidth="450px" boxPadding={0}
                                pieInnerSize="50%"
                                chartSize={250}
                                spaceBetween={'space-evenly'}
                            />
                        </VerticalStack>
                    </Box>

                    <Box width='100%' id='top-categories-graph-container' paddingBlockStart={2} paddingBlockEnd={4}>
                        <VerticalStack gap={3}>
                            <Text variant="headingSm">Top 5 Categories by issues</Text>

                            {topCategoriesChartData && Object.keys(topCategoriesChartData).length > 0 && (
                                <StackedChart
                                    key={`top-categories-graph`}
                                    type='column'
                                    areaFillHex="true"
                                    height="320"
                                    background-color="#ffffff"
                                    data={topCategoriesChartData.series}
                                    defaultChartOptions={topCategoriesChartData.defaultChartOptions}
                                    text={true}
                                    yAxisTitle="Number of issues"
                                    width={30}
                                    customXaxis={topCategoriesChartData.xAxis}
                                    showGridLines={true}
                                    noGap={true}
                                />
                            )}
                        </VerticalStack>
                    </Box>

                    {(showTestingTargets) && (
                        <Box width='100%' paddingBlockStart={4} paddingBlockEnd={2}>
                            <VerticalStack gap={3}>
                                <Text variant="headingSm">Testing targets</Text>

                                <ReportTestingTargets hostNameVsSeverityMap={hostNameVsSeverityMap} />
                            </VerticalStack>
                        </Box>
                    )}

                    {showTestingConfig && (
                        <Box width='100%' paddingBlockStart={4} paddingBlockEnd={2}>
                            <VerticalStack gap={3}>
                                <Text variant="headingSm">Test configuration</Text>

                                <ReportTestConfiguration reportTestConfigurationData={reportTestConfigurationData} />
                            </VerticalStack>
                        </Box>
                    )}
                </VerticalStack>
            </VerticalStack>
        </Box>
    )
}

export default ReportSummary